<form id="checkout-form" class="smart-form" novalidate="novalidate">

<fieldset>
    <div class="row">
        <section class="col col-6">
            <label class="input"> <i class="icon-prepend fa fa-user"></i>
                <input type="text" name="fname" placeholder="First name">
            </label>
        </section>
        <section class="col col-6">
            <label class="input"> <i class="icon-prepend fa fa-user"></i>
                <input type="text" name="lname" placeholder="Last name">
            </label>
        </section>
    </div>

    <div class="row">
        <section class="col col-6">
            <label class="input"> <i class="icon-prepend fa fa-envelope-o"></i>
                <input type="email" name="email" placeholder="E-mail">
            </label>
        </section>
        <section class="col col-6">
            <label class="input"> <i class="icon-prepend fa fa-phone"></i>
                <input type="tel" name="phone" placeholder="Phone" data-smart-masked-input="(999) 999-9999">
            </label>
        </section>
    </div>
</fieldset>

<fieldset>
<div class="row">
<section class="col col-5">
<label class="select">
<select name="country">
<option value="0" selected="" disabled="">Country</option>
    <option value="{{country.key}}" ng-repeat="country in countries" >{{country.value}}</option>
</select> <i></i> </label>
</section>

<section class="col col-4">
    <label class="input">
        <input type="text" name="city" placeholder="City">
    </label>
</section>

<section class="col col-3">
    <label class="input">
        <input type="text" name="code" placeholder="Post code">
    </label>
</section>
</div>

<section>
    <label for="address2" class="input">
        <input type="text" name="address2" id="address2" placeholder="Address">
    </label>
</section>

<section>
    <label class="textarea">
        <textarea rows="3" name="info" placeholder="Additional info"></textarea>
    </label>
</section>
</fieldset>

<fieldset>
    <section>
        <div class="inline-group">
            <label class="radio">
                <input type="radio" name="radio-inline" checked="">
                <i></i>Visa</label>
            <label class="radio">
                <input type="radio" name="radio-inline">
                <i></i>MasterCard</label>
            <label class="radio">
                <input type="radio" name="radio-inline">
                <i></i>American Express</label>
        </div>
    </section>

    <section>
        <label class="input">
            <input type="text" name="name" placeholder="Name on card">
        </label>
    </section>

    <div class="row">
        <section class="col col-10">
            <label class="input">
                <input type="text" name="card" placeholder="Card number" data-mask="9999-9999-9999-9999">
            </label>
        </section>
        <section class="col col-2">
            <label class="input">
                <input type="text" name="cvv" placeholder="CVV2" data-mask="999">
            </label>
        </section>
    </div>

    <div class="row">
        <label class="label col col-4">Expiration date</label>
        <section class="col col-5">
            <label class="select">
                <select name="month">
                    <option value="0" selected="" disabled="">Month</option>
                    <option value="1">January</option>
                    <option value="1">February</option>
                    <option value="3">March</option>
                    <option value="4">April</option>
                    <option value="5">May</option>
                    <option value="6">June</option>
                    <option value="7">July</option>
                    <option value="8">August</option>
                    <option value="9">September</option>
                    <option value="10">October</option>
                    <option value="11">November</option>
                    <option value="12">December</option>
                </select> <i></i> </label>
        </section>
        <section class="col col-3">
            <label class="input">
                <input type="text" name="year" placeholder="Year" data-mask="2099">
            </label>
        </section>
    </div>
</fieldset>

<footer>
    <button type="submit" class="btn btn-primary">
        Validate Form
    </button>
</footer>
</form>
